<template>
    <div class='productdetail-container'>
        <navcon></navcon>
        <navsearch></navsearch>
        <div class="pc-container">
            <div class="pc-c-head">
                <span>{{ }}</span>
            </div>

            <div class="main-container">
                <div class="float-container left-container">
                    <div class="big-image">
                        <img :src="bigImage" alt="" @click="showBigImage()">
                    </div>
                    <div class="all-image">
                        <ul>
                            <el-carousel height="80px" :autoplay="false">
                                <el-carousel-item v-for="index in imgLen" :key="index">

                                    <div class="test-all" v-if="index == 1 ? true : false">
                                        <li v-for="image, index1 in img1" :style="index1 == 0 ? 'padding-left:50px;' : ''">
                                            <div>
                                                <img :src="image" alt="" @click="setBigImage(image)">
                                            </div>
                                        </li>
                                    </div>

                                    <div class="test-all" v-if="index == 2 ? true : false">
                                        <li v-for="image, index1 in img2" :style="index1 == 0 ? 'padding-left:50px;' : ''">
                                            <div>
                                                <img :src="image" alt="" @click="setBigImage(image)">
                                            </div>
                                        </li>
                                    </div>
                                </el-carousel-item>
                            </el-carousel>
                        </ul>
                    </div>
                </div>
                <div class="float-container mid-container">
                    <!-- 商品标题 -->
                    <div class="mc-head">
                        <span>{{ product.spuTitle }}</span>
                    </div>
                    <!--  商品价格-->
                    <div class="price">
                        <span>价格</span>
                        <span>￥{{ product.spuPrice }}</span>
                    </div>
                    <!-- 商品详细配置信息 -->
                    <div class="all-attr" style="padding-top:8px;">
                        <div class="attr-tip">
                            <span>商品信息</span>
                        </div>
                        <div class="all-attrvalue">
                            <ul>
                                <li v-for="attr in product.attrInfos ">
                                    <div>
                                        <span>{{ attr.name }}</span>
                                        <span>{{ attr.value }}</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 商品详细描述 -->
                    <div class="product-detail">
                        <span class="detailtip">商品描述 :</span>
                        <div class="pd-container">
                            <span v-html="product.spuDetail"></span>
                        </div>
                    </div>
                    <!-- 购买商品,加入购物车,加入收藏夹 -->
                    <div class="option">
                        <div @click="buyProduct()">立即购买</div>
                        <div @click="addCart()"><i class="el-icon-shopping-cart-2"></i> 加入购物车</div>
                        <div @click="collect()"><i class="el-icon-star-on"></i> 收藏</div>
                    </div>
                </div>
                <div class="float-container right-container">
                    <!-- 头像 -->
                    <div class="head-box">
                        <img :src="memberInfo.header" alt="">
                    </div>
                    <!-- 上线状态和ip -->
                    <div class="member-status">
                        <span class="online">
                            <span v-if="memberInfo.online" style="color: #41b883;">当前在线</span>
                            <span v-if="memberInfo.online == false">
                                用户于 <span style="color: #ff4000">{{ getTime() }}</span> 来过
                            </span>
                        </span>
                        <span class="address">
                            IP {{ memberInfo.city }}
                        </span>
                    </div>
                    <!-- 用户名称 -->
                    <div class="nickname">
                        <span>
                            用户: {{ memberInfo.nickname }}
                        </span>
                    </div>
                    <!-- 评价标签 -->
                    <div class="esteem">
                        <label>百分百好评</label>
                    </div>
                    <!-- 添加关注 -->
                    <div class="interest">
                        <span @click="interest()"><i class="el-icon-plus"></i>添加关注</span>
                    </div>
                    <!-- 前往首页 -->
                    <div class="member-index">
                        <span @click="goMemberIndex()">前往首页</span>
                    </div>
                </div>
            </div>

            <!-- <div class="recommend">
                <el-empty description="暂无推荐" :image-size="400"></el-empty>
            </div> -->
        </div>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="bigImage" alt="">
        </el-dialog>
    </div>
</template>
<script>

import navcon from '../../components/navcon.vue';
import navsearch from '../../components/navsearch.vue';
import getUUID from '../../utils/uuid';
import changecategory from '../common/changecategory.vue';
import { timestampToTime } from "../../utils/util"

export default {
    name: 'productdetail',
    data() {
        return {
            spuId: '',
            product: [],
            img1: [],
            img2: [],
            bigImage: '',
            imgLen: '',
            spuInfoVo: {
                spuId: '',
            },
            dialogVisible: false,
            memberVo: [],
            cartVo: {
                memberId: '',
                cart: {
                    spuId: '',
                    spuImg: '',
                    spuDetail: '',
                    spuPrice: '',
                    spuTitle: ''
                }
            },
            collectVo: {
                memberId: '',
                spuId: '',
                spuImg: '',
                spuPrice: '',
                spuName: ''
            },
            memberInfo: []
        };
    },
    components: {
        navcon,
        navsearch,
        changecategory,
    },

    methods: {

        getTime() {
            return timestampToTime(this.memberInfo.lastLoginTime)
        },

        /**
        * 获取用户信息
        */
        async getMemberInfo() {
            await this.$http({
                url: this.$http.adornUrl(`/shitou-member/shitoumember/member/getPublisher?memberId=${this.product.memberId}`),
                method: 'post'
            }).then(({ data }) => {
                if (data.code == 200 ) {
                    this.memberInfo = data.data==null?[]:data.data
                } else {
                    this.$message({
                        type: 'warning',
                        message: data.message
                    })
                }
            })
        },

        // 关注
        async interest() {
            let member = await this.$memberInfo()
            if (member != null) {
                this.memberVo = member
            }else if ( member == null || member == undefined || member == ''){
                this.$router.push({ path: '/member/login' })
                return;
            }
            this.$http({
                url: this.$http.adornUrl(`/shitou-member/shitoumember/memberinterest/createInterest?memberId=${this.memberVo.id}&beingMemberId=${this.product.memberId}`),
                method: 'post'
            }).then(({ data }) => {
                this.$message({
                    type: data.code == 200 ? 'success' : "warning",
                    message: data.message
                })
            })
        },


        // 前往用户首页
        goMemberIndex() {
            this.$router.push({
                path: '/member/othermember',
                query: {
                    memberId: this.product.memberId,
                    params: getUUID()
                }
            })
        },


        /**
         * 收藏商品
         */
        async collect() {
            let member = await this.$memberInfo()
            if (member != null) {
                this.memberVo = member
            }else if ( member == null || member == undefined || member == ''){
                this.$router.push({ path: '/member/login' })
                return;
            }
            this.collectVo.memberId = this.memberVo.id
            this.collectVo.spuId = this.spuId
            this.collectVo.spuImg = this.product.spuImage
            this.collectVo.spuName = this.product.spuTitle
            this.collectVo.price = this.product.spuPrice
            this.$http({
                url: this.$http.adornUrl("/shitou-member/shitoumember/membercollectspu/createCollect"),
                method: 'post',
                data: this.$http.adornData(this.collectVo)
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '收藏商品成功'
                    })
                } else if (data.code == 402) {
                    this.$router.push({ path: '/member/login' })
                } else {
                    this.$message({
                        type: 'warning',
                        message: data.message + 87
                    })
                }
            })
        },


        /**
         * 前往购买商品
         */
        buyProduct() {
            let spuIds = []
            spuIds.push(this.spuId)
            // 页面跳转，数据传输
            this.$router.push({
                path: '/order/buyproduct',
                query: {
                    spuIds: spuIds
                }
            })
        },

        // 设置显示大图片
        setBigImage(image) {
            this.bigImage = image
        },

        // showBigImage
        showBigImage() {
            this.dialogVisible = true;
        },

        // 加入购物车
        async addCart() {
            let member = await this.$memberInfo()
            if (member != null) {
                this.memberVo = member
            }else if ( member == null || member == undefined || member == ''){
                this.$router.push({ path: '/member/login' })
                return;
            }
            this.cartVo.memberId = this.memberVo.id;
            this.cartVo.cart = this.product
            this.cartVo.cart.spuImg = this.product.spuImage
            this.cartVo.cart.spuTitle = this.product.spuTitle
            this.$http({
                url: this.$http.adornUrl("/shitou-cart/shitoucart/cart/addMemberCart"),
                method: 'post',
                data: this.$http.adornData(this.cartVo)
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '加入购物车成功'
                    })
                } else if (data.code == 402) {
                    this.$router.push({ path: '/member/login' })
                } else {
                    this.$message({
                        type: 'warning',
                        message: data.message
                    })
                }
            })
        },


        // 根据spuid获取商品信息
        getProduct() {
            this.$http({
                url: this.$http.adornUrl(`/shitou-product/shitouproduct/spuinfo/getProduct?spuId=${this.spuId}`),
                method: 'post',
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.product = data.data==null?[]:data.data
                    this.initAll()
                    this.getMemberInfo()
                } else {
                    this.$message({
                        type: 'warning',
                        message: data.message
                    })
                }
            })
        },


        /**
         * 创建页面时初始化数据
         */
        initAll() {
            if (this.product == null || this.product.length == 0) {
                this.$message({
                    type: 'warning',
                    message: '商品信息错误'
                })
                this.$router.go(-1)
            }
            document.title = this.product.spuTitle
            this.spuInfoVo.spuId = this.product.spuId
            this.imgLen = this.product.imageUrls.length
            if (this.imgLen >= 4) {
                this.img1 = this.product.imageUrls.slice(0, 4);
                this.img2 = this.product.imageUrls.slice(4, this.imgLen);
                this.imgLen = 2;
            } else {
                this.img1 = this.product.imageUrls
                this.imgLen = 1
            }
            this.bigImage = this.product.spuImage
        }


    },

    async created() {
        this.spuId = this.$route.query.spuId;
        this.getProduct()

    }

}
</script>
<style scoped>
@import url("../../utils/css/productdetail.css");
</style>
